import React, { useEffect, useState } from "react";
import ReactDom from "react-dom";
import ReactMarkdown from "react-markdown";
import { useLocation } from "react-router-dom";
import { PrismAsyncLight as SyntaxHighlighter } from "react-syntax-highlighter";
import { dark } from "react-syntax-highlighter/dist/esm/styles/prism";
import { useSelector } from "react-redux";
import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
import json from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';


type Props = {};

const MakDown = (props: Props) => {
  // const [content, setContent] = useState("");
 

  const content = useSelector((store:any)=>store.store.MackDownData)
  SyntaxHighlighter.registerLanguage('jsx', jsx);
  SyntaxHighlighter.registerLanguage('json', json);
  return (
    <div className="MakDownbox" style={{width:"100%"}}>
      <ReactMarkdown
        children={content}
        components={{
          code({ node, inline, className, children, ...props }) {
            const match = /language-(\w+)/.exec(className || "");
            return !inline && match ? (
              <SyntaxHighlighter
                children={String(children).replace(/\n$/, "")}
                style={dark as any}
                language={match[1]}
                PreTag="div"
                {...props}
              />
            ) : (
              <code className={className} {...props}>
                  {children}
              </code>
            );
          },
        }}
      />
    </div>
  );
};
export default MakDown;
